 <template>
	 <div>
		 <div class="back_cover">
		 </div>
		 <div class="loading_container">
			 <div class="load_img" :style="{backgroundPositionY: -(positionY%7)*0.5 + 'rem'}">
			 </div>
			 <svg class="load_ellipse">
				 <ellipse cx="26" cy="10" rx="26" ry="10" style="fill:#ddd;stroke:none;"></ellipse>
			 </svg>
		 </div>
	 </div>
</template>

<script>
    export default {
    	data(){
            return{
                positionY: 0,
                timer: null,
            }
        },
        mounted(){
        	this.timer = setInterval(() => {
        		this.positionY ++;
        	}, 600)
        },
        beforeDestroy(){
        	clearInterval(this.timer);
        }
    }
</script>

<style lang="less" rel="stylesheet/less" scoped>
	@keyframes load{
		0%   {transform: translateY(0px);}
		50%  {transform: translateY(-50px);}
		100% {transform: translateY(0px);}
	}
	@keyframes ellipse{
		0%   {transform: scale(1);}
		50%  {transform: scale(0.3);}
		100% {transform: scale(1);}
	}
    .loading_container{
    	position: fixed;
    	top: 50%;
    	left: 50%;
    	transform: translate(-50%, -50%);
		width: 0.5rem;
		height: 0.5rem;
    }
    .load_img{
		width: 100%;
		height: 100%;
    	background: url(../../../assets/image/icon_loading.png) no-repeat 0 0;
    	background-size: 0.5rem auto;
    	transform: translateY(0px);
    	animation: load .6s infinite ease-in-out;
    	position: relative;
    	z-index: 11;
    }
	.load_ellipse{
		position: absolute;
		width: 0.8rem;
		height: 0.8rem;
		top: 0.5rem;
        left: 0rem;
		z-index: 10;
		animation: ellipse .6s infinite ease-in-out;
	}
	.back_cover {
		position: fixed;
		width: 100%;
		height: 100%;
		z-index: 999;
		background-color: rgba(255, 255, 255, 0);
	}
</style>
